<template>
	<view class="buyLife">
		<NavBar leftIcon="/static/img/index/119.png">
			<template #center>
				<view class="topText">购生活 享免单</view>
			</template>
		</NavBar>
		<view class="content">
			<view class="freePurchaseGoods" v-if="data.num != 3 && data.num != 4">
				<view class="top" @tap="navTo('/pages/life/index?productType=FREE')">
					免单购商品
					<image src="/static/img/zhankai.png" mode="widthFix"></image>
				</view>
				<view class="goods">
					<view @tap="navTo('/pages/lifestyleProducts/index?id='+item.id+'&productType=PRODUCT')" class="item"
						v-for="(item,index) in data.topFreeList" :key="index">
						<image :src="data.httpUrl+'/app/file/viewFile?fileId='+item.fileId" mode="aspectFill"></image>
						￥{{item.price}}
					</view>
				</view>
				<view class="bot">
					点击查看活动规则 | <text @tap="handeClick">活动权益</text>
				</view>
			</view>
			<view class="top">
				<view class="topList">
					<view @tap="data.num = index,data.obj.pageNo = 1,requstList()"
						:class="index == data.num?'active':''" v-for="(item,index) in data.topArr" :key="index">
						{{item.name}}
					</view>
				</view>
				<view class="money" v-if="data.num == 0">
					<view class="left">
						<text>￥</text>
						累计免单金额
					</view>
					{{data.totalFreeAmount}}元
				</view>
			</view>
			<scroll-view  :refresher-triggered="data.refresherBool" :refresher-enabled="true"
				@refresherrefresh="refresherrefresh" @scrolltolower="scrolltolower" scroll-y="true">
				<Assist :num="data.num" @share="handeShare" :list="data.result.list"
					v-if="data.num == 0 || data.num == 1 || data.num == 2" />
				<CardCoupons :list="data.result.list" v-else-if="data.num == 3" />
				<OrderList @success="success" :list="data.result.list" v-else />
			</scroll-view>
		</view>
	</view>
	<u-popup :closeOnClickOverlay="false" round="20" mode="center" :show="data.show" @close="()=>{data.show = false}">
		<Share :info="{...data.info,freeList:data.freeList}" @close="data.show = false" />
	</u-popup>

</template>

<script setup lang="ts">
	import Share from './components/share.vue'
	import NavBar from '@/components/navBar.vue'
	import Assist from './components/assist.vue'
	import CardCoupons from './components/cardCoupons.vue'
	import OrderList from './components/orderList.vue'
	import { reactive } from 'vue'
	import { pageLifeProducts } from '@/utils/api/goods'
	import { pageUserFreeOrder, pageUserCoupous,pageCanFreeOrder } from "@/utils/api/freeShipping"
	
	const data = reactive({
		num: 0,
		show: false,
		freeList: [],
		info: {},
		obj: { pageNo: 1, pageSize: 10 },
		result: { list: [], total: 0 },
		refresherBool: false,
		httpUrl: getApp().globalData.baseUrl,
		totalFreeAmount: 0,
		topArr: [{ name: '我参与的' }, { name: '我发起的' }, { name: '互动广场' }, { name: '卡券' }, { name: '发起' }],
		topFreeList: []
	})
	pageLifeProducts({ data: { queryType: 'FREE', pageNo: 1, pageSize: 4 } }).then((res) => {
		res.data.list.map((item) => {
			if (item.hasPreferential.value == 'Y') {
				item.price = item.preferentialPrice;
			}
		})
		data.topFreeList = res.data.list;
	})
	const success = (id)=>{
		data.result.list.map((item,index)=>{
			if(item.sonOrderNo == id){
				data.result.list.splice(index,1)
			}
		})
	}
	const navTo = (url) => {
		uni.navigateTo({ url })
	}
	const handeShare = (item) => {
		if (data.num == 1) {
			data.show = true;
			data.info = item;
			pageLifeProducts({ data: { queryType: 'FREE', pageNo: 1, pageSize: 6, freeCode: item.freeCode } }).then((res) => {
				res.data.list.map((item) => {
					if (item.hasPreferential.value == 'Y') {
						item.price = item.preferentialPrice;
					}
				})
				data.freeList = res.data.list;
			})
		} else {

			navTo('/pages/life/index?freeCode=' + item.freeCode)
		}

	}
	const handeClick = () => {
		uni.navigateTo({
			url: '/pages/eventRegistrationNotice/index?type=buyer'
		})
	}
	const requstList = () => {
		// if (data.num == 4) {
		// 	return;
		// }
		uni.showLoading({
			title: '加载中...',
			mask: true
		})
		if (data.obj.pageNo == 1) {
			data.result.list = [];
		}
		const b = data.num == 3 ? pageUserCoupous : data.num == 4?pageCanFreeOrder:pageUserFreeOrder
		b({ data: { ...data.obj, queryType: data.num == 0 ? 'OTHER' : data.num == 1 ? 'MY' : 'ALL' } }).then((res) => {
			if (data.num == 3 || data.num == 4) {
				res.data.list = [...data.result.list, ...res.data.list];
				data.result = res.data;
			}else {
				res.data.pageInfo.list = [...data.result.list, ...res.data.pageInfo.list];
				data.result = res.data.pageInfo;
				data.totalFreeAmount = res.data.totalFreeAmount;
			}
			data.refresherBool = false;
			uni.hideLoading()
		})
	}
	const scrolltolower = () => {
		if (data.result.total != data.result.list.length) {
			data.obj.pageNo += 1;
			requstList()
		}
	}
	const refresherrefresh = () => {
		data.refresherBool = true;
		data.obj.pageNo = 1;
		requstList()
	}
	requstList()
</script>

<style lang="scss">
	:deep(.navBarTop) {
		background: transparent !important;

	}

	.freePurchaseGoods {
		padding: 20rpx;
		border-radius: 24rpx;
		background: #fff;
		margin-bottom: 24rpx;

		>.top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 32rpx;
			padding-bottom: 16rpx;
			border-bottom: 2rpx solid #F4F6FA;

			image {
				width: 40rpx;
			}
		}

		.goods {
			display: flex;
			justify-content: space-between;

			view {
				padding: 14rpx 7rpx;
				display: flex;
				flex-direction: column;
				font-size: 24rpx;
				color: #FF5233;
			}

			image {
				width: 140rpx;
				height: 140rpx;
				border-radius: 16rpx;
				margin-bottom: 8rpx;
			}

		}

		.bot {
			margin-top: 30rpx;
			font-size: 28rpx;
			color: #8C8C8C;

			text {
				font-size: 28rpx;
				color: #4080FF;
			}
		}
	}

	.buyLife {
		background: url('/static/img/freeShipping/6.png') no-repeat;
		background-size: 100% 100%;
		height: 100vh;
		display: flex;
		position: relative;
		flex-direction: column;

		scroll-view {
			flex: 1;
			overflow: auto;
		}
	}

	.content {
		flex: 1;
		display: flex;
		overflow: auto;
		flex-direction: column;
		padding: 48rpx 32rpx;
		background-color: #F4F6FA;
		border-radius: 32rpx 32rpx 0 0;
		position: relative;
		z-index: 8;
		margin-top: 60rpx;

		>.top {
			.topList {
				margin-bottom: 24rpx;
				display: flex;
				justify-content: space-between;

				view {
					line-height: 58rpx;
					padding: 0 16rpx;
					text-align: center;
					border-radius: 16rpx;
					background: #fff;
				}

				.active {
					color: #FF263F;
				}
			}

			.money {
				margin-bottom: 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 24rpx 32rpx;
				border-radius: 24rpx;
				font-size: 32rpx;
				color: #fff;
				background: linear-gradient(130deg, #F25349 0%, #F9BE4C 100%);

				.left {
					display: flex;
					align-items: center;
					font-size: 30rpx;
					color: #fff;

					text {
						background-color: rgba(255, 255, 255, .7);
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
						display: flex;
						margin-right: 10rpx;
						align-items: center;
						justify-content: center;
						color: #fff;
						font-size: 40rpx;
					}
				}
			}
		}
	}

	.topText {
		font-family: 'MyFont1';
		color: #fff;
		font-size: 36rpx;
	}
</style>